<script setup>
import { computed, reactive, ref } from "@vue/reactivity";
import {
  NButton,
  NInput,
  NSpace,
  NCard,
  NList,
  NListItem,
  NThing,
  NTag,
  NTimeline,
  NTimelineItem,
  NAvatar,
  NIcon,
} from "naive-ui";
import { onMounted, watch, watchEffect } from "@vue/runtime-core";
import axios from "axios";
import { findPostCode } from "../js/ChinesePostCode";

let inputText = ref("");
let tempText = ref("");
let values = ref([]);
let weathers = ref([]);
let localtion = reactive({
  lng: null,
  lat: null,
});
let weatherInfo = reactive({
  weather: null,
  weather_short: null,
  wind_direction: null,
  wind_power: null,
});
let postCode = ref("");

let covidInfo = reactive({
  total: 0,
  inputTotal: 0,
  todayTotal: 0,
  todayInputTotal: 0,
  dead: 0,
  areaTree: [],
});

let covidChildInfo = reactive({
  total: 0,
  inputTotal: 0,
  todayTotal: 0,
  todayInputTotal: 0,
  dead: 0,
  time: null,
});

let places = ref([]);

onMounted(() => {
  //设置title
  document.title = "Domestic City Information";
  // chuangjia
  let map = new BMap.Map("container");
  //创建坐标
  var point = new BMap.Point(116.404, 39.915);
  map.centerAndZoom(point, 15);
  //是否启动滑轮缩放
  map.enableScrollWheelZoom(true);

  //加载数据
  axios
    .get("http://localhost:8090/baidu/getCovid", {
      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
    })
    .then((res) => {
      if (res.data.code === 200) {
        covidInfo.total = res.data.object.chinaTotal.total.confirm;
        covidInfo.inputTotal = res.data.object.chinaTotal.total.input;
        covidInfo.dead = res.data.object.chinaTotal.total.dead;
        covidInfo.todayTotal = res.data.object.chinaTotal.today.confirm;
        covidInfo.todayInputTotal = res.data.object.chinaTotal.today.input;
        covidInfo.time = res.data.object.lastUpdateTime;
        covidInfo.areaTree = res.data.object.areaTree.filter((item) => {
          return item.name == "中国";
        })[0];
      }
    })
    .catch((err) => {
      console.log("error" + err);
    });
});

let getLocation = (name, province, city, area, lng, lat) => {
  inputText.value = name;
  tempText.value = name;
  values.value.length = 0;

  if (lng != undefined) {
    // chuangjia
    let map = new BMap.Map("container");
    //创建坐标
    var point = new BMap.Point(lng, lat);
    map.centerAndZoom(point, 15);
    //是否启动滑轮缩放
    map.enableScrollWheelZoom(true);
  }
  //

  localtion.lng = lng;
  localtion.lat = lat;
  //调用
  apiCall(province, city, area);
};

let apiCall = (province, city, area) => {
  console.log(province);
  console.log(city);
  console.log(area);

  getWeather(province, city, area);
  getCovid(province, city, area);
  getPostCode(province, city, area);
  getPlace(province, city, area);
  getLocalCovid(province, city, area);
  values.value.length = 0;
};

let getLocalCovid = (province, city, area) => {
  //计算
  let arr = covidInfo.areaTree.children;
  let resultarr = arr.filter((item) => {
    return province.startsWith(item.name);
  });
  let resultarrLocal = resultarr[0].children.filter((item) => {
    return city.startsWith(item.name);
  });

  covidChildInfo.total = resultarrLocal[0].total.confirm;
  covidChildInfo.inputTotal = resultarrLocal[0].total.input;
  covidChildInfo.dead = resultarrLocal[0].total.dead;
  covidChildInfo.todayTotal = resultarrLocal[0].today.confirm;
  covidChildInfo.todayInputTotal = resultarrLocal[0].today.input;
  covidChildInfo.time = resultarrLocal[0].lastUpdateTime;
};

let getPlace = (province, city, area) => {
  axios
    .get(
      "http://localhost:8090/baidu/getPlace?province=" +
        province +
        "&city=" +
        city +
        "&area=" +
        area
    )
    .then((res) => {
      if (res.data.code == 200) {
        places.value = res.data.object;
      }
      console.log(places);
    })
    .catch((err) => {
      console.log("error" + err);
    });
};

let getPostCode = (province, city, area) => {
  if (province != null) {
    postCode.value = findPostCode(province, city, area);
  }
};

let getCovid = (province, city, area) => {};

let getWeather = (province, city, area) => {
  if (province !== null && city != null) {
    let url = `http://localhost:8090/baidu/getWeather?provice=${province}&city=${city}&area=${area}&name=${inputText.value}`;
    axios
      .get(url, {
        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
      })
      .then((res) => {
        if (res.data.code == 200) {
          let obj = JSON.parse(res.data.object);
          let objInfo = obj.data.forecast_hour[0];
          weatherInfo.weather = objInfo.weather;
          weatherInfo.weather_short = objInfo.weather_short;
          weatherInfo.wind_direction = objInfo.wind_direction;
          weatherInfo.wind_power = objInfo.wind_power;
          weathers.value = obj.data.forecast_hour;
          console.log(weathers);
        }
      })
      .catch((err) => {
        console.log("error" + err);
      });
  } else if (province == null && city == null) {
    let url = `http://localhost:8090/baidu/getWeather?name=${inputText.value}`;
    axios
      .get(url, {
        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
      })
      .then((res) => {
        if (res.data.code == 200) {
          let obj = JSON.parse(res.data.object);
          let objInfo = obj.data.forecast_hour[0];
          weatherInfo.weather = objInfo.weather;
          weatherInfo.weather_short = objInfo.weather_short;
          weatherInfo.wind_direction = objInfo.wind_direction;
          weatherInfo.wind_power = objInfo.wind_power;
          weathers.value = obj.data.forecast_hour;
          console.log(weathers);
        }
      })
      .catch((err) => {
        console.log("error" + err);
      });
  }
};

let search = () => {
  let name = inputText.value;
  if (name !== "") {
    axios
      .get("http://localhost:8090/baidu/getCoordinate?address=" + name)
      .then((res) => {
        if (res.data.code == 200) {
          //数据正确
          values.value.leng = 0;
          let address = res.data.object;
          values.value = address;
        } else {
          //暂无数据
        }
      })
      .catch((err) => {
        console.log("error" + err);
      });
  } else {
    values.value.length = 0;
  }
};

let getShowStatus = computed(() => {
  return values.value.length === 0;
});

watch(
  () => values.value,
  () => {
    if (inputText.value === "") {
      values.value.length = 0;
    }
    console.log("tempText:" + tempText.value);
    console.log("inputText:" + inputText.value);
    if (tempText.value !== "" && inputText.value !== tempText.value) {
      values.value.length = 1;
      tempText.value = "";
    }
  }
);

let getWeatherContent = computed(() => (name) => {
  console.log(name);
  return (
    "预计温度:" +
    name.degree +
    "° , " +
    name.wind_power +
    "级" +
    name.wind_direction
  );
});
</script>

<template>
  <div class="hello">
    <div class="header">
      <img src="../assets/network.png" alt="" srcset="" />
      <p>Domestic City Information</p>
    </div>
    <div class="content">
      <div class="content-h2">
        <n-icon size="40">
<svg t="1634699194438" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="869" width="200" height="200"><path d="M787.99 521.6c28.46 54.65-85 169.7-160.17 227.88-100.02 77.4-225.96 125.96-241.09 104.03-6.06-8.79 10.46-23.99 49.54-84.22 57.37-88.42 98.17-151.3 78.16-183.29-9.76-15.6-35.13-18.84-85.87-25.32-25.43-3.25-40.82-2.81-106.78-3.3-77.85-0.58-82.18-1.38-85.74-5.8-24.89-30.85 56.89-152.06 155.64-239.69C511.23 205.81 652.9 151.41 664.14 168.23c6.33 9.47-34.6 32.6-69.35 97.42-7.91 14.76-69.83 130.28-29.72 191.55 46.91 71.68 193.94 8.75 222.92 64.4z" fill="#D74965" p-id="870"></path><path d="M512 96.01c229.75 0 416 186.25 416 415.99 0 229.75-186.25 416-416 416S96 741.75 96 512C96 282.26 282.25 96.01 512 96.01z m115.82 653.47c75.17-58.18 188.63-173.23 160.17-227.88-28.98-55.65-176.01 7.28-222.92-64.4-40.11-61.27 21.81-176.79 29.72-191.55 34.75-64.82 75.68-87.95 69.35-97.42-11.24-16.82-152.91 37.58-272.46 143.66-98.75 87.63-180.53 208.84-155.64 239.69 3.56 4.42 7.89 5.22 85.74 5.8 65.96 0.49 81.35 0.05 106.78 3.3 50.74 6.48 76.11 9.72 85.87 25.32 20.01 31.99-20.79 94.87-78.16 183.29-39.08 60.23-55.6 75.43-49.54 84.22 15.13 21.93 141.07-26.63 241.09-104.03z" fill="#BBE0E9" p-id="871"></path></svg>
        </n-icon>
        <div>
          <p>新冠疫情实时:</p>
        </div>
      </div>
      <div class="header" v-if="tempText === ''">
        <n-card title="国内确诊" hoverable class="cardClass" size="huge">
          {{ covidInfo.total }} 人
        </n-card>
        <n-card title="国内境外输入" hoverable class="cardClass" size="huge">
          {{ covidInfo.inputTotal }} 人</n-card
        >
        <n-card
          title="消逝生命"
          hoverable
          class="cardClass"
          style="color: red"
          size="huge"
        >
          {{ covidInfo.dead }} 人</n-card
        >
        <n-card title="今日确诊" hoverable class="cardClass" size="huge">
          {{ covidInfo.todayTotal }} 人</n-card
        >
        <n-card title="今日境外输入" hoverable class="cardClass" size="huge">
          {{ covidInfo.todayInputTotal }} 人</n-card
        >
        <n-card title="更新时间" hoverable class="cardClass" size="huge">
          {{ covidInfo.time }}</n-card
        >
      </div>
      <div class="header" v-else>
        <n-card title="本省确诊" hoverable class="cardClass" size="huge">
          {{ covidChildInfo.total }} 人
        </n-card>
        <n-card
          title="消逝生命"
          hoverable
          class="cardClass"
          style="color: red"
          size="huge"
        >
          {{ covidChildInfo.dead }} 人</n-card
        >
        <n-card title="今日确诊" hoverable class="cardClass" size="huge">
          {{ covidChildInfo.todayTotal }} 人</n-card
        >
        <n-card title="更新时间" hoverable class="cardClass" size="huge">
          {{ covidChildInfo.time }}</n-card
        >
      </div>
      <div class="weather">
        <div class="weather-left">
          <div class="search">
            <n-input
              size="large"
              round
              placeholder="输入目的地...."
              class="inputN"
              v-model:value="inputText"
              @input="search"
            />
            <!-- <n-button
          type="primary"
          size="large"
          class="inputButton"
          @click="getLocation"
          >搜索</n-button
        > -->
            <div class="searchContext" v-if="!getShowStatus">
              <n-list
                bordered
                class="searchContent"
                v-for="value in values"
                :key="value.name"
              >
                <n-list-item
                  class="listItem"
                  @click="
                    getLocation(
                      value.name,
                      value.province,
                      value.city,
                      value.area,
                      value.location != null ? value.location.lng : null,
                      value.location != null ? value.location.lat : null
                    )
                  "
                >
                  {{ value.name }}
                </n-list-item>
              </n-list>
            </div>
          </div>
          <div class="weather-item" v-if="getShowStatus">
            <div class="wheather-content" v-if="weatherInfo.weather != null">
              <div class="wheather-content-card">
                <n-card
                  title="邮政编码"
                  hoverable
                  style="fontsize: 200px"
                  class="wheather-content-card-left"
                >
                  <div>
                    <n-icon size="30">
                      <svg
                        t="1634698650901"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="1672"
                        width="200"
                        height="200"
                      >
                        <path
                          d="M830.1 442.92c17.65-30.92 6.12-74.17-23.06-94.58-14.07-9.84-29.87-14.06-45.72-13.86-36.78 0.48-73.84 24.82-90.11 58.14-7.98 16.33-10.12 36.13-2.75 52.73 11.79 26.63 43.86 38.19 72.98 38.99 34.25 0.94 71.68-11.63 88.66-41.42zM270.17 888.98c-16.35-3.07-26.91-20.46-27.6-37.08-0.7-16.62 6.14-32.56 13.24-47.6 14.8-31.31 31.65-62.8 34.48-97.3 2.84-34.51-12.82-73.44-45.34-85.29-33.23-12.11-73.4 6.78-104.33-10.35-32.36-17.91-34.75-62.72-33.03-99.67 3.79-80.82 7.56-161.62 11.34-242.44 2.12-45.43 6.51-116.46 59.22-127.79 64.84-13.95 146.93-1.58 213.46-2.31 142.47-1.53 285.01-4.6 427.47-4.6 23.71-0.25 49.84 0.45 69.11 12.86 3.53 2.27 6.82 4.93 9.83 8.04 19.2 19.89 19.43 50.78 18.48 78.41-3.17 92.15-6.35 184.3-9.52 276.46-1.31 38.13-4.92 81.13-34.39 105.35-36.74 30.2-90.71 14.49-137.64 6.78-111.78-18.34-231.59 22.69-308.64 105.71-40.98 44.17-70.02 98.62-112.93 140.92-11.75 11.61-26.97 22.96-43.21 19.9z m201.44-501.45c-2.88 20.62 3.19 42.68 17.48 57.85 22.56 23.95 64.36 25.7 89.37 4.31 8.71-7.44 14.98-17.22 18.7-27.98 6.97-20.17 4.91-43.72-7.13-61.5-35.19-52.03-109.93-33.73-118.42 27.32z m-148.44-69.01c-49.46-4.4-103.14 48.46-69.73 103.93 18.76 31.14 64.16 42.4 95.3 23.63 31.13-18.75 42.4-64.16 23.63-95.28-12.55-20.83-30.57-30.62-49.2-32.28z"
                          fill="#EAC22C"
                          p-id="1673"
                        ></path>
                      </svg>
                    </n-icon>
                    <span> {{ postCode }}</span>
                  </div>
                </n-card>
                <n-card
                  title="经纬度"
                  hoverable
                  style="fontsize: 200px"
                  class="wheather-content-card-right"
                >
                  <div>
                    <n-icon size="30">
                      <svg
                        t="1634698602517"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="1538"
                        width="200"
                        height="200"
                      >
                        <path
                          d="M531.49 95.71c229.92 0 416.3 186.38 416.3 416.29s-186.38 416.29-416.3 416.29C301.58 928.29 115.2 741.91 115.2 512S301.58 95.71 531.49 95.71z m211.19 695.11c0-26.66-58.35-49.29-139.31-57.29 62.03-113 131.36-294.96 131.36-352.17 0-115.19-92.77-208.56-207.21-208.56S320.3 266.17 320.3 381.36c0 57.16 69.84 241.83 131.85 354.78-69.31 9.64-117.3 30.5-117.3 54.68 0 33.35 91.3 60.38 203.92 60.38s203.91-27.03 203.91-60.38z"
                          fill="#23ABD7"
                          p-id="1539"
                        ></path>
                        <path
                          d="M603.37 733.53c80.96 8 139.31 30.63 139.31 57.29 0 33.35-91.29 60.38-203.91 60.38s-203.92-27.03-203.92-60.38c0-24.18 47.99-45.04 117.3-54.68 29.43 53.6 57.09 91.05 74.68 91.05 17.89 0 46.35-38.66 76.54-93.66z"
                          fill="#FFFFFF"
                          p-id="1540"
                        ></path>
                        <path
                          d="M734.73 381.36c0 57.21-69.33 239.17-131.36 352.17-30.19 55-58.65 93.66-76.54 93.66-17.59 0-45.25-37.45-74.68-91.05C390.14 623.19 320.3 438.52 320.3 381.36c0-115.19 92.78-208.56 207.22-208.56s207.21 93.37 207.21 208.56z m-87.21 41.65c0-66.27-53.73-120-120-120-66.28 0-120 53.73-120 120 0 66.28 53.72 120 120 120 66.27 0 120-53.72 120-120z"
                          fill="#D74965"
                          p-id="1541"
                        ></path>
                        <path
                          d="M527.52 423.01m-120 0a120 120 0 1 0 240 0 120 120 0 1 0-240 0Z"
                          fill="#FFC6F7"
                          p-id="1542"
                        ></path>
                      </svg> </n-icon
                    ><span>{{ localtion.lng }},{{ localtion.lat }}</span>
                  </div>
                </n-card>
              </div>
              <n-card title="未来天气" hoverable>
                <!-- {{ weatherInfo.weather_short }} ,{{
                  weatherInfo.wind_direction
                }} -->
                <n-timeline
                  v-for="item in weathers.slice(3, 7)"
                  :key="item.name"
                >
                  <n-timeline-item
                    type="success"
                    :title="item.weather"
                    :content="getWeatherContent(item)"
                    :time="item.update_time"
                  />
                </n-timeline>
              </n-card>

              <n-card title="附近景区" hoverable>
                <n-space
                  v-for="item in places.slice(0, 5)"
                  :key="item.name"
                  class="tagClass"
                >
                  <n-tag type="info"> {{ item.name }} </n-tag>
                </n-space></n-card
              >
              <div class="tagClass"></div>
            </div>
          </div>
        </div>
        <div class="map">
          <div id="container" class="container"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.hello {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
  .header {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    img {
      height: 5vh;
    }
    p {
      color: white;
      font-size: 1.5vh;
      padding-right: 5vw;
    }
  }
  .content {
    height: 90%;
    width: 90%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    .content-h2 {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-left: 3vw;
      div {
        padding: 0 0 0 1vw;
        display: flex;
        width: 20vw;
        p {
          font-size: 23px;
          color: rgba(0, 0, 0, 0.8);
        }
      }
    }
    .header {
      width: 100%;
      height: 10%;
      display: flex;
      justify-content: space-evenly;
      align-items: center;

      .cardClass {
        width: 15%;
      }
    }
    .weather {
      height: 80%;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      align-items: center;
      background-color: #fff;
      .weather-left {
        height: 90%;
        width: 17%;
        .n-card {
          max-width: 400px;
          margin-bottom: 1vh;
        }

        .inputN {
          width: 16vw;
          height: 4vh;
          line-height: 4vh;
          font-size: 20px;
        }

        .searchContent {
          width: 15vw;
        }

        .searchContext {
          height: 60vh;
          overflow: hidden;
        }

        .search {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 100%;
        }

        .listItem {
        }
      }

      .map {
        height: 90%;
        width: 75%;
        background-color: aqua;
        border: 1px solid #ccc;
        .container {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .wheather-content {
    height: 60vh;
    margin-top: 1vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    .weather-item {
      width: 15vw;
    }
    div {
      font-size: 16px;
    }
    .tagClass {
      width: 100%;
    }
  }

  .wheather-content-card {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    .wheather-content-card-left {
     
      flex: 1;
      div {
        display: flex;
      }
    }
    .wheather-content-card-right {
      flex: 2;
      div {
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>
